<template>
  <swiper :options="swiperOption" class="carousel-container">
    <swiper-slide v-for="item in slides" :key="item.id" class="carousel-swiper-slide">
      <div class="carousel-title">{{item.title}}</div>
      <img :src="item.url" alt="swiper-img">
    </swiper-slide>
    <div class="swiper-pagination my-swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name: 'Swiper',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      slides: [{
        url: '../static/images/carousel-1.jpg',
        title: '《小王子》读书分享'
      }, {
        url: '../static/images/carousel-2.jpg',
        title: '清晨，看一本好书'
      }, {
        url: '../static/images/carousel-3.jpg',
        title: '《百年孤独》读书分享'
      }],
      swiperOption: {
        autoplay: {
          autoplay: true,
          delay: 3000,
          stopOnLastSlide: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>

<style scoped>
.carousel-container{
  width: 100%;
  height: 219px;
}
.carousel-swiper-slide{
  position: relative;
}
.carousel-swiper-slide > img{
  width: 100%;
}
.carousel-title{
  position: absolute;
  width: 100%;
  height: 36px;
  line-height: 36px;
  color: rgba(255,250,250,1);
  background-color: rgba(54,54,54,0.6);
  font-size: 16px;
  text-align: center;
  bottom: 0;
}
.my-swiper-pagination{
  text-align: right;
}
</style>
